<template>
  <div class="w-full flex justify-between items-center px-5 py-1.5 border-b border-gray-200 h-14">
    <!-- 左侧logo和标题 -->
    <div class="flex items-center space-x-4">
          <div class="flex items-center space-x-2">
            <div class="w-8 h-8 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
              </svg>
            </div>
            <h1 class="text-xl font-semibold text-gray-900">融资管理系统</h1>
          </div>
        </div>

    <div class="flex items-center space-x-4">
          <div class="flex items-center space-x-2 text-sm text-gray-600">
            <span>中国农业银行</span>
            <span class="text-gray-400">|</span>
            <button class="text-emerald-600 hover:text-emerald-700 font-medium"  @click="handleAuthAction" >退出</button>
          </div>
          <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
            <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
          </div>
        </div>
  </div>


</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Base64 } from 'js-base64'
import { apiClient } from "../api/apiService.js";
import { ElMessage } from 'element-plus';
import { useStore } from "vuex";

const router = useRouter()
const nickname = ref('')
const bankName = ref('')
const isLogin = ref(true)

const handleAuthAction = () => {
    console.log("执行退出操作")
    console.log(localStorage.getItem('setToken'))
    router.push('/login')
    localStorage.removeItem('setToken')
    isLogin.value = true
    console.log(localStorage.getItem('setToken'))

}

const selectName = async () => {
  try {
    const res = await selectBankName({})
    bankName.value = res.data
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  if (window.localStorage.token) {
    isLogin.value = true
    const token = window.localStorage.token
    const arr = token.split(".")
    const res = Base64.decode(arr[1])
    nickname.value = JSON.parse(res).nickname
    console.log('nickname', nickname.value)
  } else {
    isLogin.value = false
  }
  selectName()
})

const selectBankName = async()=>{
      const response = await apiClient.get(`finance/selectBankName`, {
      headers: {
        Authorization: window.localStorage.token,
      },
    });
    return response;
}
</script>

<style scoped>
/* 可以保留一些必要的自定义样式 */
</style>
